export default function main() {
  return (<main className="pt-16">
        <section className="hero-bg">
          <div className="max-w-7xl mx-auto px-4 py-20">
            <div className="flex items-center">
              <div className="w-1/2">
                <h1 className="text-5xl font-bold text-white mb-6">预见未来<br/>尽在 Web3 预测平台</h1>
                <p className="text-gray-200 text-lg mb-8">参与去中心化预测市场，用智慧赢取收益</p>
                <button className="bg-primary text-white px-8 py-3 !rounded-button hover:bg-secondary whitespace-nowrap text-lg">
                  立即开始
                </button>
              </div>
            </div>
          </div>
        </section>

        <section className="max-w-7xl mx-auto px-4 py-12">
          <div className="flex gap-8">
            <div className="w-8/12">
              <h2 className="text-2xl font-bold mb-6">热门赛事</h2>
              <div className="grid grid-cols-2 gap-6">
                <div className="bg-white rounded-lg shadow-sm overflow-hidden">
                  <img 
                    src="https://ai-public.mastergo.com/ai/img_res/8d602e88096a855315ebca3fe331ea37.jpg" 
                    className="w-full h-[250px] object-cover" 
                    alt="电竞赛事"
                  />
                  <div className="p-4">
                    <div className="flex items-center justify-between mb-2">
                      <span className="bg-blue-100 text-blue-600 px-2 py-1 rounded-button text-sm">电竞赛事</span>
                      <span className="text-gray-500 text-sm">12 小时后开始</span>
                    </div>
                    <h3 className="font-bold mb-2">2024 LPL 春季赛 EDG vs RNG</h3>
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-gray-600">参与人数：3,267</span>
                      <span className="text-primary">奖池：￥186,420</span>
                    </div>
                  </div>
                </div>

                <div className="bg-white rounded-lg shadow-sm overflow-hidden">
                  <img 
                    src="https://ai-public.mastergo.com/ai/img_res/79c5663b5874e99f139bc84ff86d7d01.jpg" 
                    className="w-full h-[250px] object-cover" 
                    alt="加密货币"
                  />
                  <div className="p-4">
                    <div className="flex items-center justify-between mb-2">
                      <span className="bg-green-100 text-green-600 px-2 py-1 rounded-button text-sm">加密货币</span>
                      <span className="text-gray-500 text-sm">3 天后开始</span>
                    </div>
                    <h3 className="font-bold mb-2">BTC 价格突破 7 万美元预测</h3>
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-gray-600">参与人数：12,856</span>
                      <span className="text-primary">奖池：￥892,365</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div className="w-4/12">
              <div id="loggedIn" className="bg-white rounded-lg shadow-sm p-6 hidden">
                <div className="flex items-center space-x-4 mb-6">
                  <div className="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center">
                    <i className="fas fa-user text-gray-400 text-2xl"></i>
                  </div>
                  <div className="flex-1 truncate">
                    <h3 className="font-medium text-gray-900 truncate">0x7A3d...F8e2</h3>
                    <p className="text-gray-500 text-sm">已连接钱包</p>
                  </div>
                </div>
                <div className="grid grid-cols-3 gap-4 mb-6">
                  <div className="bg-gray-50 rounded-lg p-4">
                    <p className="text-sm text-gray-500 mb-1">我的积分</p>
                    <p className="font-bold text-xl">12,368</p>
                  </div>
                  <div className="bg-gray-50 rounded-lg p-4">
                    <p className="text-sm text-gray-500 mb-1">已发布</p>
                    <p className="font-bold text-xl">23</p>
                  </div>
                  <div className="bg-gray-50 rounded-lg p-4">
                    <p className="text-sm text-gray-500 mb-1">胜率</p>
                    <p className="font-bold text-xl">76.5%</p>
                  </div>
                </div>
                <button className="w-full bg-primary text-white py-2 !rounded-button hover:bg-secondary whitespace-nowrap mb-3">
                  充值
                </button>
                <button className="w-full border border-primary text-primary py-2 !rounded-button hover:bg-primary hover:text-white whitespace-nowrap">
                  提现
                </button>
              </div>

              <div id="notLoggedIn" className="bg-white rounded-lg shadow-sm p-6">
                <div className="flex flex-col items-center justify-center py-8">
                  <div className="w-20 h-20 rounded-full bg-gray-100 flex items-center justify-center mb-4">
                    <i className="fas fa-user text-gray-300 text-3xl"></i>
                  </div>
                  <p className="text-gray-600 mb-6">连接钱包以访问更多功能</p>
                  <button className="w-full bg-primary text-white py-2 !rounded-button hover:bg-secondary whitespace-nowrap">
                    连接钱包
                  </button>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="max-w-7xl mx-auto px-4 py-12">
          <h2 className="text-2xl font-bold mb-6">最新预测事件</h2>
          <div className="grid grid-cols-3 gap-6">
            <div className="bg-white rounded-lg shadow-sm overflow-hidden">
              <img 
                src="https://ai-public.mastergo.com/ai/img_res/7cbf32c881a5d19b8d53b3ff12579558.jpg" 
                className="w-full h-[200px] object-cover" 
                alt="足球赛事"
              />
              <div className="p-4">
                <div className="flex items-center justify-between mb-2">
                  <span className="bg-red-100 text-red-600 px-2 py-1 rounded-button text-sm">足球赛事</span>
                  <span className="text-gray-500 text-sm">5 天后开始</span>
                </div>
                <h3 className="font-bold mb-2">欧冠 1/4 决赛 皇马 vs 曼城</h3>
                <div className="flex items-center justify-between text-sm">
                  <span className="text-gray-600">参与人数：8,965</span>
                  <span className="text-primary">奖池：￥452,680</span>
                </div>
              </div>
            </div>

            <div className="bg-white rounded-lg shadow-sm overflow-hidden">
              <img 
                src="https://ai-public.mastergo.com/ai/img_res/0e7cb1f50bea003b8b11559fa65f06d4.jpg" 
                className="w-full h-[200px] object-cover" 
                alt="股市预测"
              />
              <div className="p-4">
                <div className="flex items-center justify-between mb-2">
                  <span className="bg-purple-100 text-purple-600 px-2 py-1 rounded-button text-sm">股市预测</span>
                  <span className="text-gray-500 text-sm">1 周后开始</span>
                </div>
                <h3 className="font-bold mb-2">恒生指数突破 20000 点预测</h3>
                <div className="flex items-center justify-between text-sm">
                  <span className="text-gray-600">参与人数：5,234</span>
                  <span className="text-primary">奖池：￥235,890</span>
                </div>
              </div>
            </div>

            <div className="bg-white rounded-lg shadow-sm overflow-hidden">
              <img 
                src="https://ai-public.mastergo.com/ai/img_res/df0b57b792257e86c61761956043affe.jpg" 
                className="w-full h-[200px] object-cover" 
                alt="区块链"
              />
              <div className="p-4">
                <div className="flex items-center justify-between mb-2">
                  <span className="bg-yellow-100 text-yellow-600 px-2 py-1 rounded-button text-sm">区块链</span>
                  <span className="text-gray-500 text-sm">2 周后开始</span>
                </div>
                <h3 className="font-bold mb-2">ETH 2.0 升级成功率预测</h3>
                <div className="flex items-center justify-between text-sm">
                  <span className="text-gray-600">参与人数：15,678</span>
                  <span className="text-primary">奖池：￥965,430</span>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
      );
}